<template>
    <div class="stbh">
        <div id="mapDiv" class="mapDiv"></div>
        <el-dialog title="" :visible.sync="dialogTableVisible" style="z-index: 99999">
            <img :src="imgurl" alt="" style="width: 100%" />
        </el-dialog>
        <div id="one" class="zoology" @click="dialog111">
            <i class="iconfont iconfangxiang" style="font-size: 20px;margin-top: 10px;display: inline-block;"></i>
            <div>基地</div>
            <div v-show="$store.state.zangw == '1'" style="line-height:0;">རྟེན་གཞི།</div>
        </div>
        <div class="zoology1">
            <div id="two" style="
                    display: inline-block;
                    width: 100px;
                    height: 80px;
                    text-align: center;
                    border-top-left-radius: 6px;
                    border-bottom-left-radius: 6px;
                " @click="farmarea">
                <i class="iconfont icondikuai" style="font-size: 20px;margin-top: 10px;display: inline-block;"></i>
                <div>地块</div>
                <div style="line-height:0;" v-show="$store.state.zangw == '1'">ས་ཆ།</div>
            </div>
            <div id="three" style="display: inline-block;height: 80px; width: 100px; text-align: center;"
                @click="warehouse">
                <i class="iconfont iconcangku" style="font-size: 20px;margin-top: 10px;display: inline-block;"></i>
                <div>仓库</div>
                <div style="line-height:0;" v-show="$store.state.zangw == '1'">མཛོད་ཁང་</div>
            </div>
            <div id="four" style="
                    display: inline-block;
                    width: 100px;
                    height: 80px;
                    text-align: center;
                    border-top-right-radius: 6px;
                    border-bottom-right-radius: 6px;
                " @click="architecture">
                <i class="iconfont iconjianzhu" style="font-size: 20px;margin-top: 10px;display: inline-block;"></i>
                <div>建筑</div>
                <div style="line-height:0;" v-show="$store.state.zangw == '1'">ཨར་ལས།</div>
            </div>
        </div>
        <div class="zoology2">
            <div id="five" style="
                    display: inline-block;
                    width: 100px;
                    height: 80px;
                    text-align: center;
                    border-top-left-radius: 6px;
                    border-bottom-left-radius: 6px;
                " @click="weather">
                <i class="iconfont iconsheshidu" style="font-size: 20px;margin-top: 10px;display: inline-block;"></i>
                <div>传感器</div>
                <div style="line-height:0;" v-show="$store.state.zangw == '1'">གནམ་གཤིས་བརྒྱུད་སྤྲོད་</div>
            </div>
            <div id="six" style="display: inline-block;height: 80px; width: 98px; text-align: center;" @click="camera">
                <i class="iconfont iconshexiangtou" style="font-size: 20px;margin-top: 10px;display: inline-block;"></i>
                <div>摄像机</div>
                <div style="line-height:0;" v-show="$store.state.zangw == '1'">བརྙན་མིག་</div>
            </div>
            <div id="seven" style="
                    display: inline-block;
                    width: 99px;
                    height: 80px;
                    text-align: center;
                    border-top-right-radius: 6px;
                    border-bottom-right-radius: 6px;
                " @click="panoramagram">
                <i class="iconfont iconquanjingtu" style="font-size: 20px;margin-top: 10px;display: inline-block;"></i>
                <div>全景图</div>
                <div style="line-height:0;" v-show="$store.state.zangw == '1'">ཁྱོན་ལྗོངས་རི་མོ་</div>
            </div>
        </div>
        <div class="address">
            <input v-model="addressname" style="border: none;height: 80px; border-right: 0; outline: none"
                class="addressinput" placeholder="请输入搜索地址" />
            <span class="addressspan" style="text-align: center; margin-left: 0px; cursor: pointer"
                @click="sousuo">搜索</span>
            <!--          <div style="position:absolute;">བཤེར་འཚོལ་</div>-->
        </div>
        <el-drawer :before-close="handleClose" :visible.sync="dialog" direction="rtl" custom-class="drawer" ref="drawer">
            <div class="demo-drawer__content">
                <el-form :model="form" class="margin-left" label-width="80px" v-if="ruleForm.type == 1">
                    <div class="hnk jgxx">基地信息</div>
                    <div style="margin-left: 10px" v-show="$store.state.zangw == '1'">རྟེན་གཞིའི་ཆ་འཕྲིན་</div>
                    <el-form-item style="margin-top: 20px">
                        <div slot="label">基地名称</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">རྟེན་གཞིའི་མིང་</div>
                        <el-input v-model="ruleForm.name" autocomplete="off" style="width: 150px"></el-input>
                        <!--                      <div>རྟེན་གཞིའི་མིང་</div>-->
                    </el-form-item>
                    <!--                    <div>རྟེན་གཞིའི་མིང་</div>-->
                    <el-form-item label="面积">
                        <div slot="label">面积</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">རརྒྱ་ཁྱོན།་</div>
                        <el-input v-model="ruleForm.area" autocomplete="off" style="width: 150px"></el-input>
                        <span style="margin-left: 10px">亩</span>
                    </el-form-item>
                    <el-form-item label="颜色">
                        <div slot="label">颜色</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">མདོག</div>
                        <div class="block">
                            <el-color-picker v-model="ruleForm.color"></el-color-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="透明度">
                        <div slot="label">透明度</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">གསལ་ཚད་</div>
                        <div class="block">
                            <!-- <span class="demonstration">默认</span> -->
                            <el-col :span="7">
                                <el-slider v-model="ruleForm.diaphaneity" style="width: 120px"></el-slider>
                            </el-col>
                            <el-col :span="12">
                                <el-input style="width: 50px" v-model="ruleForm.diaphaneity" disabled="disabled"></el-input>
                            </el-col>
                        </div>
                    </el-form-item>
                </el-form>
                <el-form :model="form" class="margin-left" label-width="80px" v-if="ruleForm.type == 2">
                    <div class="hnk jgxx">地块信息</div>
                    <el-form-item label="地块名称">
                        <div slot="label">地块名称</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">ས་ཆའི་མིང་</div>

                        <el-input v-model="ruleForm.name" autocomplete="off" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="面积">
                        <div slot="label">面积</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">རརྒྱ་ཁྱོན།་</div>
                        <el-input v-model="ruleForm.area" autocomplete="off" style="width: 150px"></el-input>
                        <span style="margin-left: 10px">亩</span>
                    </el-form-item>
                    <el-form-item label="坐标">
                        <div slot="label">坐标</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">གནས་ཚད་</div>
                        <div v-for="(item, index) in lnglat" :key="index">
                            <el-input v-model="item.lat" autocomplete="off"
                                style="width: 100px; margin: 0 5px 5px 0"></el-input>
                            <el-input v-model="item.lng" autocomplete="off" style="width: 100px"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="颜色">
                        <div slot="label">颜色</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">མདོག</div>
                        <div class="block">
                            <el-color-picker v-model="ruleForm.color"></el-color-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="透明度">
                        <div slot="label">透明度</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">གསལ་ཚད་</div>
                        <div class="block">
                            <el-col :span="7">
                                <el-slider v-model="ruleForm.diaphaneity" style="width: 120px"></el-slider>
                            </el-col>
                            <el-col :span="12">
                                <el-input style="width: 50px" v-model="ruleForm.diaphaneity" disabled="disabled"></el-input>
                            </el-col>
                        </div>
                    </el-form-item>
                    <div class="hnk jgxx">人员信息</div>
                    <el-form-item label="农户：">
                        <div slot="label">农户</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">ཞིང་དུད་</div>
                        <template>
                            <el-select v-model="peasantId" @change="choosePrincipal" value-key="id" style="width: 300px"
                                placeholder="请选择">
                                <el-option v-for="item in userList" :key="item.id" :label="item.name"
                                    :value="item"></el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                    <el-form-item label="管理员：" style="margin-bottom: 80px">
                        <div slot="label">管理员</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">ཞདོ་དམ་པ་</div>
                        <template>
                            <el-select v-model="principalId" @change="choosePrincipal1" value-key="id" style="width: 300px"
                                placeholder="请选择">
                                <el-option v-for="item in userList" :key="item.id" :label="item.name"
                                    :value="item"></el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                </el-form>

                <el-form :model="form" class="margin-left" label-width="80px" v-if="ruleForm.type == 3">
                    <div class="hnk jgxx">仓库信息</div>

                    <el-form-item label="仓库名称">
                        <div slot="label">仓库名称</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">མཛོད་ཁང་</div>

                        <el-input v-model="ruleForm.name" autocomplete="off" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="面积">
                        <div slot="label">面积</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">རརྒྱ་ཁྱོན།་</div>
                        <el-input v-model="ruleForm.area" autocomplete="off" style="width: 150px"></el-input>
                        <span style="margin-left: 10px">亩</span>
                    </el-form-item>
                    <el-form-item label="坐标">
                        <div slot="label">坐标</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">གནས་ཚད་</div>
                        <div v-for="(item, index) in lnglat" :key="index">
                            <el-input v-model="item.lat" autocomplete="off"
                                style="width: 100px; margin: 0 5px 5px 0"></el-input>
                            <el-input v-model="item.lng" autocomplete="off" style="width: 100px"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="颜色">
                        <div slot="label">颜色</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">མདོག</div>
                        <div class="block">
                            <el-color-picker v-model="ruleForm.color"></el-color-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="透明度">
                        <div slot="label">透明度</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">གསལ་ཚད་</div>
                        <div class="block">
                            <el-col :span="7">
                                <el-slider v-model="ruleForm.diaphaneity" style="width: 120px"></el-slider>
                            </el-col>
                            <el-col :span="12">
                                <el-input style="width: 50px" v-model="ruleForm.diaphaneity" disabled="disabled"></el-input>
                            </el-col>
                        </div>
                    </el-form-item>
                    <div class="hnk jgxx">人员管理</div>
                    <el-form-item label="管理员：">
                        <div slot="label">管理员</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">ཞདོ་དམ་པ་</div>
                        <template>
                            <el-select v-model="principalId" @change="choosePrincipal1" value-key="id" style="width: 300px"
                                placeholder="请选择">
                                <el-option v-for="item in userList" :key="item.id" :label="item.name"
                                    :value="item"></el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                    <div class="hnk jgxx">设置分区</div>
                    <div v-for="(item, index) in position" :key="index">
                        <el-form-item label="仓位名称">
                            <el-input v-model="item.name" autocomplete="off" style="width: 150px"></el-input>
                        </el-form-item>
                    </div>
                    <div style="margin: 0 0 80px 10px">
                        <el-button @click="addposition">添加仓位</el-button>
                        <el-button @click="deleteposition">删除仓位</el-button>
                    </div>
                </el-form>

                <el-form :model="form" class="margin-left" label-width="80px" v-if="ruleForm.type == 4">
                    <div class="hnk jgxx">建筑信息</div>
                    <el-form-item label="建筑名称">
                        <el-input v-model="ruleForm.name" autocomplete="off" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="面积">
                        <div slot="label">面积</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">རརྒྱ་ཁྱོན།་</div>
                        <el-input v-model="ruleForm.area" autocomplete="off" style="width: 150px"></el-input>
                        <span style="margin-left: 10px">亩</span>
                    </el-form-item>
                    <el-form-item label="坐标">
                        <div slot="label">坐标</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">གནས་ཚད་</div>
                        <div v-for="(item, index) in lnglat" :key="index">
                            <el-input v-model="item.lat" autocomplete="off"
                                style="width: 100px; margin: 0 5px 5px 0"></el-input>
                            <el-input v-model="item.lng" autocomplete="off" style="width: 100px"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="颜色">
                        <div slot="label">颜色</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">མདོག</div>
                        <div class="block">
                            <el-color-picker v-model="ruleForm.color"></el-color-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="透明度">
                        <div slot="label">透明度</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">གསལ་ཚད་</div>
                        <div class="block">
                            <el-col :span="7">
                                <el-slider v-model="ruleForm.diaphaneity" style="width: 120px"></el-slider>
                            </el-col>
                            <el-col :span="12">
                                <el-input style="width: 50px" v-model="ruleForm.diaphaneity" disabled="disabled"></el-input>
                            </el-col>
                        </div>
                    </el-form-item>
                </el-form>
                <!-- 全景图 -->
                <el-form :model="form" class="margin-left" label-width="100px" v-if="ruleForm.type == 5">
                    <el-form-item label="名称">
                        <el-input v-model="ruleForm.name" autocomplete="off" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item label="照片上传：">
                        <el-upload class="upload-poster" action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false" :on-change="imgPreview" :auto-upload="false">
                            <img v-if="soilImg" :src="soilImg" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>jpg、png、gif格式，60x60像素，不超过2MB
                    </el-form-item>
                    <el-form-item label="拍摄时间：">
                        <el-date-picker v-model="ruleForm.imgTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择"
                            style="width: 200px"></el-date-picker>
                    </el-form-item>
                </el-form>

                <!--  气象传感  -->
                <el-form :model="form" class="margin-left" label-width="120px" v-if="sbtype == 6">
                    <el-form-item label="设备类型：">
                        <el-select v-model="sbname" placeholder="请选择" style="width: 200px" @change="equipmentTypechange">
                            <el-option v-for="item in typelist" :key="item.name" :label="item.name" :value="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备名称：">
                        <template>
                            <el-select v-model="equipmentIds" @change="choosePrincipal1" value-key="id" style="width: 200px"
                                placeholder="请选择">
                                <el-option v-for="item in shebeilist" :key="item.id" :label="item.name"
                                    :value="item"></el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                </el-form>
                <!-- 摄像机 -->
                <el-form :model="form" class="margin-left" label-width="120px" v-if="ruleForm.type == 7">
                    <el-form-item label="设备名称：">
                        <template>
                            <el-select v-model="equipmentIds" @change="choosePrincipal1" value-key="id" style="width: 200px"
                                placeholder="请选择">
                                <el-option v-for="item in sxtList" :key="item.id" :label="item.name"
                                    :value="item"></el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                </el-form>

                <div class="footerFixed" style="margin-bottom: 20px; box-shadow: 0 -1px 1px 1px #aaa; padding-left: 20px">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{
                        loading ? '提交中 ...' : '确 定'
                    }}</el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import { map_save, map_findByList, soil_bind } from '@/request/breedApi.js';
import { user_findByAll, equipment_findByType, base_details, warehouse_listpart, warehouse_tree } from '@/request/api';
import { ElMessage } from '../../../../request/norepeat.js';
import BaiduMap from '../../../common/js';
import axios from "axios"
export default {
    inject: ['reload'],
    data() {
        return {
            sbtype: '',
            sbname: '',
            typelist: [{ name: '气象传感' }, { name: '土壤墒情' }, { name: '水质设备' }, { name: '杀虫灯' }, { name: '虫情监控' }],
            videoFlag: false,  //视频播放层flag
            equipmentIds: '',
            imgurl: '',
            dialogTableVisible: false,
            disabled: true,
            shebeilist: '',
            principalId: '',
            peasantId: '',
            soilImg: '',
            opactity: 0,
            name: '',
            area: '',
            lnglat: [
                {
                    //坐标
                    lng: '',
                    lat: ''
                }
            ],

            addressname: '',
            color1: '#409EFF',
            polygonTool: '',
            zoom: '11',
            points: [],
            line: '',
            T: '',
            lay: '',
            map: '',
            drivingRoute: '',
            // _CarTrack: '',
            onDrawPolygon: '',
            config: '',
            iconMaker: [],
            dialog: false,
            loading: false,
            latitude: '',
            longtitude: '',
            form: {},
            formLabelWidth: '80px',
            timer: null,
            list: '',
            urllist: '',
            dikuailists: '',
            localsearch: '',
            localSearchResult: '',
            geocoder: '',
            marker: '',
            zhongxin: '',
            lng: '',
            lat: '',
            polygon: '',
            polygonclick: '',
            markerTool: '',
            ruleForm: {
                type: '',
                color: '#409EFF',
                diaphaneity: 60
            },
            position: [
                {
                    //仓位
                    name: ''
                }
            ],
            userList: [],
            mapList: [],
            type: '',
            details: {},
            baseList: [],
            sxtList: [],
            jdzb: [], //基地坐标
            dkzb: [], //地块
            navigator: '',
            cangweiData: '',
            dkzbList: [],
            tubiaoList: []
        };
    },
    created() {
    },
    mounted() {
        if (this.$route.query.id) {
            var jsid = this.$route.query.id;
            base_details(jsid).then((res) => {
                this.lnglat = JSON.parse(res.data.coordinate);
                this.ruleForm = res.data;
                this.peasantId = res.data.peasantName;
                this.principalId = res.data.principalName;
                this.ruleForm.diaphaneity = Number(res.data.diaphaneity);
            });
            this.dialog = this.$route.query.isshow;
        }
        equipment_findByType({}).then((res) => {
            this.tubiaoList = res.data;
        });
        setTimeout(this.getshuju(), 1000);
        setTimeout(this.init(), 1000);
        setTimeout(this.getshebei(), 1000);
    },
    methods: {
        equipmentTypechange(val) {
            this.equipmentIds = ''
            if (this.sbname == '气象传感') {
                this.ruleForm.type = 6
            } else if (this.sbname == '土壤') {
                this.ruleForm.type = 6
            } else if (this.sbname == '水质') {
                this.ruleForm.type = 6
            }
            else if (this.sbname == '虫情') {
                this.ruleForm.type = 6
            }
            else if (this.sbname == '杀虫灯') {
                this.ruleForm.type = 6
            }else{
                this.ruleForm.type = 6
            }
            var datas = {
                type: this.sbname
            };
            equipment_findByType(datas).then((res) => {
                this.shebeilist = res.data;
            });
        },
        //判断点是否在另一平面图中
        pddm(point, polygon) {
            var N = polygon.length;
            var boundOrVertex = true; //如果点位于多边形的顶点或边上，也算做点在多边形内，直接返回true
            var intersectCount = 0; //cross points count of x
            var precision = 2e-10; //浮点类型计算时候与0比较时候的容差
            var p1, p2; //neighbour bound vertices
            var p = point; //测试点
            // var p = point[0]; //测试点

            p1 = polygon[0]; //left vertex
            for (var i = 1; i <= N; ++i) {
                //check all rays
                if (p.lat == p1.lat && p.lng == p1.lng) {
                    return boundOrVertex; //p is an vertex
                }

                p2 = polygon[i % N]; //right vertex
                if (p.lng < Math.min(p1.lng, p2.lng) || p.lng > Math.max(p1.lng, p2.lng)) {
                    //ray is outside of our interests
                    p1 = p2;
                    continue; //next ray left point
                }
                if (p.lng > Math.min(p1.lng, p2.lng) && p.lng < Math.max(p1.lng, p2.lng)) {
                    //ray is crossing over by the algorithm (common part of)
                    if (p.lat <= Math.max(p1.lat, p2.lat)) {
                        //x is before of ray
                        if (p1.lng == p2.lng && p.lat >= Math.min(p1.lat, p2.lat)) {
                            //overlies on a horizontal ray
                            return boundOrVertex;
                        }
                        if (p1.lat == p2.lat) {
                            //ray is vertical
                            if (p1.lat == p.lat) {
                                //overlies on a vertical ray
                                return boundOrVertex;
                            } else {
                                //before ray
                                ++intersectCount;
                            }
                        } else {
                            //cross point on the left side
                            var xinters = ((p.lng - p1.lng) * (p2.lat - p1.lat)) / (p2.lng - p1.lng) + p1.lat; //cross point of x
                            if (Math.abs(p.lat - xinters) < precision) {
                                //overlies on a ray
                                return boundOrVertex;
                            }
                            if (p.lat < xinters) {
                                //before ray
                                ++intersectCount;
                            }
                        }
                    }
                } else {
                    //special case when ray is crossing through the vertex
                    if (p.lng == p2.lng && p.lat <= p2.lat) {
                        //p crossing over p2
                        var p3 = polygon[(i + 1) % N]; //next vertex
                        if (p.lng >= Math.min(p1.lng, p3.lng) && p.lng <= Math.max(p1.lng, p3.lng)) {
                            //p.y lies between p1.y & p3.y
                            ++intersectCount;
                        } else {
                            intersectCount += 2;
                        }
                    }
                }
                p1 = p2;
            }
            if (intersectCount % 2 == 0) {
                //偶数在多边形外
                return false;
                // this.flag = false
            } else {
                //奇数在多边形内
                return true;
                // this.flag = true
            }
        },
        //判断两多边形是否存在点与区域的包含关系(A的点在B的区域内或B的点在A的区域内)
        pddbx(plyA, plyB) {
            let [a, b] = [false, false];
            a = plyA.some((item) => this.pddm(item, plyB));
            if (!a) {
                b = plyB.some((item) => this.pddm(item, plyA));
            }
        },

        getshebei() {
            var data = {
                type: '摄像机'
            };
            equipment_findByType(data).then((res) => {
                this.sxtList = res.data;
            });

        },
        imgPreview(file, fileList) {
            this.soilImg = URL.createObjectURL(file.raw);
            let fileName = file.name;
            let regex = /(.jpg|.gif|.png|.jpeg)$/;
            if (regex.test(fileName.toLowerCase())) {
                this.ruleForm.files = file.raw;
                this.ruleForm.soilImg = file.name;
            } else {
                this.$message.error('请选择图片文件');
            }
        },
        choosePrincipal(ele) {
            this.ruleForm.peasantId = ele.id;
            this.ruleForm.peasantName = ele.name;
        },
        choosePrincipal1(ele) {
            this.ruleForm.principalId = ele.id;
            this.ruleForm.principalName = ele.name;
            this.ruleForm.equType = ele.type;
        },
        init() {
            user_findByAll('').then((res) => {
                this.userList = res.data;
            });
            //         warehouse_tree('').then((res) => {

            //         });
        },
        formatTooltip(val) {
            return val / 100;
        },
        //添加仓位
        addposition() {
            this.position.push({
                name: ''
            });
        },
        //删除仓位
        deleteposition() {
            this.position.pop();
        },
        //地块
        farmarea(e) {
            var obj = document.getElementById('two');
            obj.style.color = '#1BC46D';

            var obj = document.getElementById('one');
            obj.style.color = 'black';

            var obj = document.getElementById('three');
            obj.style.color = 'black';
            var obj = document.getElementById('four');
            obj.style.color = 'black';
            var obj = document.getElementById('five');
            obj.style.color = 'black';
            var obj = document.getElementById('six');
            obj.style.color = 'black';
            var obj = document.getElementById('seven');
            obj.style.color = 'black';
            this.ruleForm.type = 2;
            this.sbtype = 1
            // 只有一个基地时 获取基地id
            // this.ruleForm.pid = this.baseList[0].id;
            var _this = this;

            // console.log(_this.baseList)
            if (_this.baseList.length <= 0) {
                let Message = new ElMessage();
                var obj = document.getElementById('two');
                obj.style.color = 'black';
                Message.info('请先创建基地');
            } else {


                this.polygonTool.open();
                this.markerTool.close();
                this.polygonTool.addEventListener('draw', function huoqu(e) {
                    var area = (e.currentArea / 1000 / 1000) * 1500;
                    _this.ruleForm.area = area.toFixed(2);
                    var list = e.currentLnglats;
                    var s = JSON.stringify(list);
                    localStorage.setItem('list', s);
                    _this.lnglat = JSON.parse(s);
                    _this.dialog = true;
                });
                this.polygonTool.addEventListener('addpoint', function huoqu1(e) {
                    var dian = e.currentLnglats.slice(e.currentLnglats.length - 1)[0];
                    let Message = new ElMessage();
                    for (let s = 0; s < _this.baseList.length; s++) {
                        var jdzb = JSON.parse(_this.baseList[s].coordinate)
                        if (_this.pddm(dian, jdzb) == true) {
                            _this.ruleForm.pid = _this.baseList[s].id
                            for (var i = 0; i < _this.dkzb.length; i++) {
                                if (_this.pddm(dian, _this.dkzb[i])) {
                                    _this.polygonTool.close();
                                    var obj = document.getElementById('two');
                                    obj.style.color = 'black';
                                    Message.info('新增地块不能与已有地块重叠');
                                } else {
                                    for (var w = 0; w < _this.dkzb[i].length; w++) {
                                        if (_this.pddm(_this.dkzb[i][w], e.currentLnglats)) {
                                            _this.polygonTool.close();
                                            var obj = document.getElementById('two');
                                            obj.style.color = 'black';
                                            Message.info('新增地块不能与已有地块重叠');
                                        }
                                    }
                                }
                            }
                            return
                        } else if (s == _this.baseList.length - 1) {
                            _this.polygonTool.close()
                            var obj = document.getElementById('two');
                            obj.style.color = 'black';
                            Message.info('新增地块必须在基地内');
                        }
                    }

                });
            }


        },
        //仓库
        warehouse() {
            var obj = document.getElementById('three');
            obj.style.color = '#1BC46D';
            var obj = document.getElementById('one');
            obj.style.color = 'black';
            var obj = document.getElementById('two');
            obj.style.color = 'black';
            var obj = document.getElementById('four');
            obj.style.color = 'black';
            var obj = document.getElementById('five');
            obj.style.color = 'black';
            var obj = document.getElementById('six');
            obj.style.color = 'black';
            var obj = document.getElementById('seven');
            obj.style.color = 'black';
            this.ruleForm.type = 3;
            this.sbtype = 1
            // this.ruleForm.pid = this.baseList[0].id;
            var _this = this
            if (_this.baseList.length <= 0) {
                let Message = new ElMessage();
                var obj = document.getElementById('three');
                obj.style.color = 'black';
                Message.info('请先创建基地');
            } else {
                this.polygonTool.open();
                this.markerTool.close();
                this.polygonTool.addEventListener('draw', function huoqu(e) {
                    var area = (e.currentArea / 1000 / 1000) * 1500;
                    _this.ruleForm.area = area.toFixed(2);
                    var list = e.currentLnglats;
                    var s = JSON.stringify(list);
                    localStorage.setItem('list', s);
                    _this.lnglat = JSON.parse(s);
                    _this.dialog = true;
                });
                this.polygonTool.addEventListener('addpoint', function huoqu1(e) {
                    var dian = e.currentLnglats.slice(e.currentLnglats.length - 1)[0];
                    let Message = new ElMessage();
                    for (let s = 0; s < _this.baseList.length; s++) {
                        var jdzb = JSON.parse(_this.baseList[s].coordinate)
                        if (_this.pddm(dian, jdzb) == true) {
                            _this.ruleForm.pid = _this.baseList[s].id
                            for (var i = 0; i < _this.dkzb.length; i++) {
                                if (_this.pddm(dian, _this.dkzb[i])) {
                                    _this.polygonTool.close();
                                    var obj = document.getElementById('three');
                                    obj.style.color = 'black';
                                    Message.info('新增仓库不能与已有地块重叠');
                                } else {
                                    for (var w = 0; w < _this.dkzb[i].length; w++) {
                                        if (_this.pddm(_this.dkzb[i][w], e.currentLnglats)) {
                                            _this.polygonTool.close();
                                            var obj = document.getElementById('three');
                                            obj.style.color = 'black';
                                            Message.info('新增仓库不能与已有地块重叠');
                                        }
                                    }
                                }
                            }
                            return
                        } else if (s == _this.baseList.length - 1) {
                            _this.polygonTool.close();
                            var obj = document.getElementById('three');
                            obj.style.color = 'black';
                            Message.info('新增仓库必须在基地内');
                        }
                    }
                });
            }

        },
        //建筑
        architecture() {
            var obj = document.getElementById('four');
            obj.style.color = '#1BC46D';
            var obj = document.getElementById('one');
            obj.style.color = 'black';
            var obj = document.getElementById('two');
            obj.style.color = 'black';
            var obj = document.getElementById('three');
            obj.style.color = 'black';

            var obj = document.getElementById('five');
            obj.style.color = 'black';
            var obj = document.getElementById('six');
            obj.style.color = 'black';
            var obj = document.getElementById('seven');
            obj.style.color = 'black';
            this.ruleForm.type = 4;
            this.sbtype = 1
            // this.ruleForm.pid = this.baseList[0].id;
            var _this = this
            if (_this.baseList.length <= 0) {
                let Message = new ElMessage();
                var obj = document.getElementById('four');
                obj.style.color = 'black';
                Message.info('请先创建基地');
            } else {
                this.polygonTool.open();
                this.markerTool.close();
                this.polygonTool.addEventListener('draw', function huoqu(e) {
                    var area = (e.currentArea / 1000 / 1000) * 1500;
                    _this.ruleForm.area = area.toFixed(2);
                    var list = e.currentLnglats;
                    var s = JSON.stringify(list);
                    localStorage.setItem('list', s);
                    _this.lnglat = JSON.parse(s);
                    _this.dialog = true;
                });
                //添加建筑每次点击地图
                this.polygonTool.addEventListener('addpoint', function huoqu1(e) {
                    var dian = e.currentLnglats.slice(e.currentLnglats.length - 1)[0];
                    let Message = new ElMessage();

                    for (let s = 0; s < _this.baseList.length; s++) {
                        var jdzb = JSON.parse(_this.baseList[s].coordinate)
                        if (_this.pddm(dian, jdzb) == true) {
                            _this.ruleForm.pid = _this.baseList[s].id
                            for (var i = 0; i < _this.dkzb.length; i++) {
                                if (_this.pddm(dian, _this.dkzb[i])) {
                                    _this.polygonTool.close();
                                    var obj = document.getElementById('four');
                                    obj.style.color = 'black';
                                    Message.info('新增建筑不能与已有地块重叠');
                                } else {
                                    for (var w = 0; w < _this.dkzb[i].length; w++) {
                                        if (_this.pddm(_this.dkzb[i][w], e.currentLnglats)) {
                                            _this.polygonTool.close();
                                            var obj = document.getElementById('four');
                                            obj.style.color = 'black';
                                            Message.info('新增建筑不能与已有地块重叠');
                                        }
                                    }
                                }
                            }

                            return
                        } else if (s == _this.baseList.length - 1) {
                            _this.polygonTool.close();
                            var obj = document.getElementById('four');
                            obj.style.color = 'black';
                            Message.info('新增建筑必须在基地内');
                        }
                    }
                });
            }

        },
        // 气象传感
        weather() {
            var obj = document.getElementById('five');
            obj.style.color = '#1BC46D';
            var obj = document.getElementById('one');
            obj.style.color = 'black';
            var obj = document.getElementById('two');
            obj.style.color = 'black';
            var obj = document.getElementById('three');
            obj.style.color = 'black';
            var obj = document.getElementById('four');
            obj.style.color = 'black';

            var obj = document.getElementById('six');
            obj.style.color = 'black';
            var obj = document.getElementById('seven');
            obj.style.color = 'black';
            this.sbtype = 6;
            // this.ruleForm.pid = this.baseList[0].id;
            var _this = this;
            if (_this.baseList.length <= 0) {
                let Message = new ElMessage();
                var obj = document.getElementById('five');
                obj.style.color = 'black';
                Message.info('请先创建基地');
            } else {
                this.markerTool.open();
                this.polygonTool.close();
                console.log(this.markerTool)
                this.markerTool.addEventListener('mouseup', function get(e) {
                    let dian = e.currentLnglat;
                    let Message = new ElMessage();

                    for (let s = 0; s < _this.baseList.length; s++) {
                        var jdzb = JSON.parse(_this.baseList[s].coordinate)
                        if (_this.pddm(dian, jdzb) == true) {
                            _this.ruleForm.pid = _this.baseList[s].id
                            var qxflag = false;
                            for (var i = 0; i < _this.dkzbList.length; i++) {
                                if (_this.pddm(dian, JSON.parse(_this.dkzbList[i].coordinate))) {
                                    qxflag = true;
                                    _this.ruleForm.massifId = _this.dkzbList[i].id
                                    // console.log(_this.dkzbList[i])
                                }
                            }
                            if (qxflag === false) {
                                _this.markerTool.clear();
                                var obj = document.getElementById('five');
                                obj.style.color = 'black';
                                Message.info('新增气象传感必须在地块、仓库或建筑上');
                            } else {
                                var list = e.currentLnglat;
                                var w = JSON.stringify(list);
                                localStorage.setItem('list', w);
                                _this.lnglat = JSON.parse(w);
                                _this.dialog = true;
                            }
                            return
                        } else if (s == _this.baseList.length - 1) {
                            _this.markerTool.clear();
                            var obj = document.getElementById('five');
                            obj.style.color = 'black';
                            Message.info('新增气象传感必须在基地内');
                        }
                    }
                });
            }

        },
        //摄像机
        camera() {
            var obj = document.getElementById('six');
            obj.style.color = '#1BC46D';
            var obj = document.getElementById('one');
            obj.style.color = 'black';
            var obj = document.getElementById('two');
            obj.style.color = 'black';
            var obj = document.getElementById('three');
            obj.style.color = 'black';
            var obj = document.getElementById('four');
            obj.style.color = 'black';
            var obj = document.getElementById('five');
            obj.style.color = 'black';
            var obj = document.getElementById('seven');
            obj.style.color = 'black';
            this.ruleForm.type = 7;
            this.sbtype = 1
            this.ruleForm.pid = this.baseList[0].id;
            var _this = this;
            if (_this.baseList.length <= 0) {
                let Message = new ElMessage();
                var obj = document.getElementById('six');
                obj.style.color = 'black';
                Message.info('请先创建基地');
            } else {
                this.markerTool.open();
                this.polygonTool.close();
                this.markerTool.addEventListener('mouseup', function get(e) {
                    let dian = e.currentLnglat;
                    let Message = new ElMessage();

                    for (let s = 0; s < _this.baseList.length; s++) {
                        var jdzb = JSON.parse(_this.baseList[s].coordinate)
                        if (_this.pddm(dian, jdzb) == true) {
                            _this.ruleForm.pid = _this.baseList[s].id
                            var qxflag = false;
                            for (var i = 0; i < _this.dkzbList.length; i++) {
                                if (_this.pddm(dian, JSON.parse(_this.dkzbList[i].coordinate))) {
                                    qxflag = true;
                                    _this.ruleForm.massifId = _this.dkzbList[i].id
                                }
                            }
                            if (qxflag === false) {
                                _this.markerTool.clear();
                                var obj = document.getElementById('six');
                                obj.style.color = 'black';
                                Message.info('新增摄像机必须在地块、仓库或建筑上');
                            } else {
                                var list = e.currentLnglat;
                                var w = JSON.stringify(list);
                                localStorage.setItem('list', w);
                                _this.lnglat = JSON.parse(w);
                                _this.dialog = true;
                            }

                            return
                        } else if (s == _this.baseList.length - 1) {
                            _this.markerTool.clear();
                            var obj = document.getElementById('six');
                            obj.style.color = 'black';
                            Message.info('新增摄像机必须在基地内');
                        }
                    }


                });
            }
        },
        // 全景图
        panoramagram() {
            var obj = document.getElementById('seven');
            obj.style.color = '#1BC46D';
            var obj = document.getElementById('one');
            obj.style.color = 'black';
            var obj = document.getElementById('two');
            obj.style.color = 'black';
            var obj = document.getElementById('three');
            obj.style.color = 'black';
            var obj = document.getElementById('four');
            obj.style.color = 'black';
            var obj = document.getElementById('five');
            obj.style.color = 'black';
            var obj = document.getElementById('six');
            obj.style.color = 'black';
            this.ruleForm.type = 5;
            this.sbtype = 1
            this.ruleForm.pid = this.baseList[0].id;
            var _this = this;
            if (_this.baseList.length <= 0) {
                let Message = new ElMessage();
                var obj = document.getElementById('six');
                obj.style.color = 'black';
                Message.info('请先创建基地');
            } else {
                this.markerTool.open();
                this.polygonTool.close();
                this.markerTool.addEventListener('mouseup', function get(e) {
                    let dian = e.currentLnglat;
                    let Message = new ElMessage();


                    for (let s = 0; s < _this.baseList.length; s++) {
                        var jdzb = JSON.parse(_this.baseList[s].coordinate)
                        if (_this.pddm(dian, jdzb) == true) {
                            _this.ruleForm.pid = _this.baseList[s].id
                            var qxflag = false;
                            for (var i = 0; i < _this.dkzbList.length; i++) {
                                if (_this.pddm(dian, JSON.parse(_this.dkzbList[i].coordinate))) {
                                    qxflag = true;
                                    _this.ruleForm.massifId = _this.dkzbList[i].id
                                }
                            }
                            if (qxflag === false) {
                                _this.markerTool.clear();
                                var obj = document.getElementById('seven');
                                obj.style.color = 'black';
                                Message.info('新增全景图必须在地块、仓库或建筑上');
                            } else {
                                var list = e.currentLnglat;
                                var w = JSON.stringify(list);
                                localStorage.setItem('list', w);
                                _this.lnglat = JSON.parse(w);
                                _this.dialog = true;
                            }

                            return
                        } else if (s == _this.baseList.length - 1) {
                            _this.markerTool.clear();
                            var obj = document.getElementById('seven');
                            obj.style.color = 'black';
                            Message.info('新增全景图必须在基地内');
                        }
                    }


                });
            }

        },
        // 基地
        dialog111() {

            this.ruleForm = {};
            var obj = document.getElementById('one');
            obj.style.color = '#1BC46D';

            var obj = document.getElementById('two');
            obj.style.color = 'black';
            var obj = document.getElementById('three');
            obj.style.color = 'black';
            var obj = document.getElementById('four');
            obj.style.color = 'black';
            var obj = document.getElementById('five');
            obj.style.color = 'black';
            var obj = document.getElementById('six');
            obj.style.color = 'black';
            var obj = document.getElementById('seven');
            obj.style.color = 'black';

            this.ruleForm.type = 1;
            var _this = this;
            this.polygonTool.open();
            this.markerTool.close();
            this.polygonTool.addEventListener('draw', function huoqu(e) {
                var area = (e.currentArea / 1000 / 1000) * 1500;
                _this.ruleForm.area = area.toFixed(2);
                var list = e.currentLnglats;
                var s = JSON.stringify(list);
                localStorage.setItem('list', s);
                _this.lnglat = JSON.parse(s);
                _this.dialog = true;
            });

        },
        addListRow() {
            this.lnglat.push({
                lng: '',
                lat: ''
            });
        },
        handleClose(done) {
            if (this.ruleForm.type == 6 || this.ruleForm.type == 7) {
                if (this.equipmentIds == '') {
                    this.$notify({
                        title: '提示',
                        message: '设备不能为空',
                        type: 'info',
                        duration: 1000
                    });
                    return false;
                } else {
                }
            }
            if (this.ruleForm.type == 1 || this.ruleForm.type == 2 || this.ruleForm.type == 3 || this.ruleForm.type == 4) {
                if (!this.ruleForm.name) {
                    this.$notify({
                        title: '提示',
                        message: '名称不能为空',
                        type: 'info',
                        duration: 1000
                    });
                    return;
                }
            }
            if (this.loading) {
                return;
            }

            this.$confirm('确定要提交表单吗？')
                .then((_) => {
                    var obj = document.getElementById('one');
                    obj.style.color = 'black';
                    var obj = document.getElementById('two');
                    obj.style.color = 'black';
                    var obj = document.getElementById('three');
                    obj.style.color = 'black';
                    var obj = document.getElementById('four');
                    obj.style.color = 'black';
                    var obj = document.getElementById('five');
                    obj.style.color = 'black';
                    var obj = document.getElementById('six');
                    obj.style.color = 'black';
                    var obj = document.getElementById('seven');
                    obj.style.color = 'black';
                    this.loading = true;
                    this.ruleForm.diaphaneity = this.ruleForm.diaphaneity;
                    // this.ruleForm.coordinate = localStorage.getItem("list")
                    this.ruleForm.coordinate = JSON.stringify([this.lnglat]);
                    var cangwei = [];
                    for (var b in this.position) {
                        cangwei.push(this.position[b].name);
                    }
                    var abcd = JSON.stringify(cangwei);
                    abcd = abcd.substr(1);
                    abcd = abcd.substr(0, abcd.length - 1);
                    if (this.ruleForm.type == 3) {
                        this.ruleForm.warehouseParts = cangwei;
                    }

                    let formdata = new FormData();
                    console.log(this.ruleForm.coordinate, formdata);
                    let coordinate = `[${this.ruleForm.coordinate.replace(/\[|]/g, '')}]`
                    console.log(111, coordinate);
                    this.ruleForm.coordinate = coordinate;

                    var xjzb = JSON.parse(coordinate);

                    for (var a in this.ruleForm) {
                        if (this.ruleForm[a] == null || this.ruleForm[a] == 'null') {
                            this.ruleForm[a] = '';
                            formdata.append(a, '');
                        } else {
                            formdata.append(a, this.ruleForm[a]);
                        }
                    }
                    if (this.ruleForm.type == 6) {
                        map_save(formdata).then((res) => {
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                type: 'success',
                                duration: 1000

                            });
                            this.reload();
                        });
                    } else if (this.ruleForm.type == 7) {
                        map_save(formdata).then((res) => {
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                type: 'success',
                                duration: 1000
                            });

                            this.reload();
                        });
                    } else {
                        map_save(formdata).then((res) => {
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                type: 'success',
                                duration: 1000
                            });
                            this.reload();
                        });
                    }
                    this.timer = setTimeout(() => {
                        done();
                        // 动画关闭需要一定的时间
                        setTimeout(() => {
                            this.loading = false;
                        }, 400);
                    }, 2000);
                })
                .catch((_) => { });
        },
        //表单取消
        cancelForm() {
            this.ruleForm = {
                type: '',
                color: '#1BC46D',
                diaphaneity: 60
            };

            var obj = document.getElementById('one');
            obj.style.color = 'black';
            var obj = document.getElementById('two');
            obj.style.color = 'black';
            var obj = document.getElementById('three');
            obj.style.color = 'black';
            var obj = document.getElementById('four');
            obj.style.color = 'black';
            var obj = document.getElementById('five');
            obj.style.color = 'black';
            var obj = document.getElementById('six');
            obj.style.color = 'black';
            var obj = document.getElementById('seven');
            obj.style.color = 'black';
            this.loading = false;
            this.dialog = false;
            clearTimeout(this.timer);
            this.markerTool.clear();
        },
        getshuju() {
            map_findByList('').then((res) => {
                this.mapList = res;
                warehouse_tree('').then((ress) => {
                    this.cangweiData = ress
                    if (this.mapList.length > 0) {
                        for (let l = 0; l < this.mapList.length; l++) {
                            for (let u = 0; u < this.cangweiData.length; u++) {
                                if (this.mapList[l].id == this.cangweiData[u].id) {
                                    this.mapList[l] = this.cangweiData[u]
                                }
                            }
                        }
                        var coorlist = JSON.parse(res[0].coordinate);
                        var arr = [];
                        for (var j = 0; j < coorlist.length; j++) {
                            var s = coorlist[j];
                            arr.push(new T.LngLat(parseFloat(s.lng), parseFloat(s.lat)));
                        }
                        this.urllist = arr;

                        for (let i = 0; i < this.mapList.length; i++) {
                            this.mapList[i].isEditable = false;
                            if (this.mapList[i].type == 1) {
                                this.baseList.push(this.mapList[i]);
                                this.jdzb = JSON.parse(this.mapList[i].coordinate);
                            }
                            if (this.mapList[i].type == 2 || this.mapList[i].type == 3 || this.mapList[i].type == 4) {
                                this.dkzb.push(JSON.parse(this.mapList[i].coordinate));
                                this.dkzbList.push(this.mapList[i]);
                            }
                            var list = [];
                            var newList = [];
                            if (this.mapList.length > 0) {
                                var list = this.mapList[0].coordinate.split(';');
                                for (var j = 0; j < list.length; j++) {
                                    newList = JSON.parse(list[j]);
                                    this.longtitude = parseFloat(newList[0].lng);
                                    this.latitude = parseFloat(newList[0].lat);
                                }
                            }

                        }
                        this.getmap();
                    } else {
                        if (
                            this.longtitude == '' ||
                            this.longtitude == null ||
                            this.longtitude == undefined ||
                            this.longtitude == 'null'
                        ) {

                            var cityCoordinate = JSON.parse(localStorage.getItem('cityCoordinate'));
                            this.longtitude = cityCoordinate.lng;
                            this.latitude = cityCoordinate.lat;
                        }

                        this.getmap();
                    }
                });
            });
        },
        getmap() {
            BaiduMap.init().then((T) => {
                this.T = T;
                this.zoom = 12;
                this.map = new T.Map('mapDiv'); // 初始化地图对象

                this.map.centerAndZoom(new T.LngLat(this.longtitude, this.latitude), 12); // 设置显示地图的中心点和级别
                this.map.disableDoubleClickZoom();
                // console.log(this.map.getZoom())
                //创建对象
                // var ctrl = new T.Control.MapType();
                //添加控件
                this.map.addControl(TMAP_HYBRID_MAP);
                // 创建图片对象

                var config = {
                    strokeColor: 'blue', //折线颜色  s
                    fillColor: 'blue', //填充颜色。当参数为空时，折线覆盖物将没有填充效果
                    strokeWeight: '3px', //折线的宽度，以像素为单位
                    strokeOpacity: 0.5, //折线的透明度，取值范围0 - 1
                    fillOpacity: 0.5, //填充的透明度，取值范围0 - 1
                    showLabel: false //是否显示面积，默认为false
                };
                this.markerTool = new T.MarkTool(this.map);
                this.polygonTool = new T.PolygonTool(this.map, config);
                this.geocoder = new T.Geocoder(this.map);

                //注册测面工具绘制完成后的事件
                for (let k = 0; k < this.mapList.length; k++) {
                    if (this.mapList[k].type == 1 || this.mapList[k].type == 2 || this.mapList[k].type == 3 || this.mapList[k].type == 4) {
                        let con = JSON.parse(this.mapList[k].coordinate);
                        this.polygon = new T.Polygon(con, {
                            color: this.mapList[k].color,
                            fillOpacity: this.mapList[k].diaphaneity / 100,
                            details: this.mapList[k]
                        });

                        // var latlng = new T.LngLat(116.420837,39.902395);
                        //  console.log(this.mapList[k].coordinate[0])
                        // var label = new T.Label({
                        // 	text: this.mapList[k].name,
                        // 	position:con[0] ,
                        // 	offset: new T.Point(-9, 0)
                        // });
                        // //创建地图文本对象
                        // this.map.addOverLay(label);
                        // var _this = this;
                        // this.map.addEventListener('zoomstart', function huoqu(e) {
                        // console.log(e)
                        // var _this = this;
                        // _this.details = e.target.options.details;
                        // });
                        // this.map.addEventListener('zoomend', function huoqu(e) {
                        // console.log(_this.map.getZoom())
                        // if(_this.map.getZoom()<12){
                        // _this.map.removeOverLay(label)
                        // console.log(111)
                        // }

                        // console.log(e)
                        var _this = this;
                        // _this.details = e.target.options.details;
                        // });

                        this.map.addOverLay(this.polygon);
                        var name = this.mapList[k];

                        this.polygon.addEventListener('click', function huoqu(e) {
                            var _this = this;
                            _this.details = e.target.options.details;
                        });
                        this.polygon.addEventListener('dblclick', function handleEdit(e) {
                            if (e.target.details.cw) {
                                _this.position = e.target.details.cw;
                            }

                            var qcfgw = _this.map.getOverlays();
                            for (var i = 0; i < qcfgw.length; i++) {
                                if (qcfgw[i].F == e.target.F) {
                                }
                            }
                            var bjzb = JSON.parse(e.target.options.details.coordinate);

                            _this.ruleForm = e.target.options.details;
                            _this.lnglat = bjzb;
                            _this.peasantId = _this.ruleForm.peasantName;
                            _this.principalId = _this.ruleForm.principalName;
                            localStorage.setItem('list', _this.ruleForm.coordinate);
                            _this.ruleForm.diaphaneity = Number(_this.ruleForm.diaphaneity);
                            _this.dialog = true;

                        });
                    }

                    //在地块中间显示种植的作物
                    if (this.mapList[k].type == 2) {
                        var pointArray = JSON.parse(this.mapList[k].coordinate)
                        var sortedLongitudeArray = pointArray.map(item => item.lng).sort();//首先对经度进行排序，红色部分是array中经度的名称
                        var sortedLatitudeArray = pointArray.map(item => item.lat).sort();//对纬度进行排序，红色部分是array中纬度的名称
                        var centerLongitude = ((parseFloat(sortedLongitudeArray[0]) + parseFloat(sortedLongitudeArray[sortedLongitudeArray.length - 1])) / 2).toFixed(4);
                        const centerLatitude = ((parseFloat(sortedLatitudeArray[0]) + parseFloat(sortedLatitudeArray[sortedLatitudeArray.length - 1])) / 2).toFixed(4);

                        //如果经纬度在array中不是数字类型，需要转化为数字类型进行计算，如果是可以去掉parseFloat处理
                        var coor = { "lat": centerLatitude, "lng": centerLongitude }
                        var icon = new T.Icon({
                            iconUrl: this.$store.state.plantImg + this.mapList[k].jyImg,
                            iconSize: new T.Point(27, 27),
                            iconAnchor: new T.Point(10, 10),
                        });
                        this.marker = new T.Marker(coor, { icon: icon });
                        //判断地块内是否有种植作物，有的话显示作物图片
                        if (this.mapList[k].jyImg) {
                            this.map.addOverLay(this.marker);
                        }
                    }

                    //启用线编辑功能
                }
                for (let e = 0; e < this.tubiaoList.length; e++) {

                    if (this.tubiaoList[e].type == 5) {
                        console.log('5555', e);
                        var con = JSON.parse(this.tubiaoList[k].coordinate);
                        var icon = new T.Icon({
                            iconUrl: 'https://grove.cpzsyun.com:81/re/b.png',
                            iconSize: new T.Point(19, 27),
                            iconAnchor: new T.Point(10, 25)
                        });
                        this.marker = new T.Marker(
                            new T.LngLat(
                                con[0].lng,
                                con[0].lat
                            ), { icon: icon, details: this.tubiaoList[e] });
                        this.map.addOverLay(this.marker);
                        let _this = this;
                        this.marker.addEventListener('click', function huoqu(e) {
                            _this.dialogTableVisible = true;
                            _this.imgurl = _this.$store.state.plantImg + e.target.options.details.soilImg;
                        });
                        this.marker.addEventListener('dblclick', function huoqu(e) {
                            _this.ruleForm = e.target.options.details;
                            _this.dialog = true;
                        });
                    }
                    //摄像机
                    if (this.tubiaoList[e].type == '摄像机' && this.tubiaoList[e].coordinate) {
                        console.log('摄像机', e, this.tubiaoList[e]);
                        var con = JSON.parse(this.tubiaoList[e].coordinate);
                        var icon = new T.Icon({
                            iconUrl: 'http://grove.cpzsyun.com:81/icon/摄像头.png',
                            iconSize: new T.Point(25, 45),
                            iconAnchor: new T.Point(10, 25)
                        });
                        this.marker = new T.Marker(
                            new T.LngLat(
                                con[0].lng,
                                con[0].lat
                            ), { icon: icon, details: this.tubiaoList[e] });
                        this.map.addOverLay(this.marker);
                        let _this = this;
                        this.marker.addEventListener('click', function huoqu(e) {

                        });
                        this.marker.addEventListener('dblclick', function huoqu(e) {
                            // // console.log(e)
                            // console.log(e.target.options.details.coordinate)
                            _this.lnglat = JSON.parse(e.target.options.details.coordinate);
                            _this.ruleForm = e.target.options.details;
                            _this.equipmentIds = e.target.options.details.principalName
                            _this.dialog = true;
                        });
                    }
                    //土壤
                    if (this.tubiaoList[e].type == '土壤墒情' && this.tubiaoList[e].coordinate) {
                        console.log('土壤', e);
                        var con = JSON.parse(this.tubiaoList[e].coordinate);
                        var icon = new T.Icon({
                            iconUrl: 'http://grove.cpzsyun.com:81/icon/土壤墒情.png',
                            iconSize: new T.Point(25, 45),
                            iconAnchor: new T.Point(10, 25)
                        });
                        this.marker = new T.Marker
                            (new T.LngLat(
                                con[0].lng,
                                con[0].lat
                            ), { icon: icon, details: this.tubiaoList[e] });
                        this.map.addOverLay(this.marker);
                        let _this = this;
                        this.marker.addEventListener('click', function huoqu(e) {

                        });
                        this.marker.addEventListener('dblclick', function huoqu(e) {
                            // // console.log(e)
                            // console.log(e.target.options.details.coordinate)
                            _this.lnglat = JSON.parse(e.target.options.details.coordinate);
                            _this.ruleForm = e.target.options.details;
                            _this.equipmentIds = e.target.options.details.principalName
                            _this.dialog = true;
                        });
                    }
                    //水质
                    if (this.tubiaoList[e].type == '水质' && this.tubiaoList[e].coordinate) {
                        console.log('水质设备', e);
                        var con = JSON.parse(this.tubiaoList[e].coordinate);
                        var icon = new T.Icon({
                            iconUrl: 'http://grove.cpzsyun.com:81/icon/水质.png',
                            iconSize: new T.Point(25, 45),
                            iconAnchor: new T.Point(10, 25)
                        });
                        this.marker = new T.Marker(
                            new T.LngLat(
                                con[0].lng,
                                con[0].lat
                            ), { icon: icon, details: this.tubiaoList[e] });
                        this.map.addOverLay(this.marker);
                        let _this = this;
                        this.marker.addEventListener('click', function huoqu(e) {

                        });
                        this.marker.addEventListener('dblclick', function huoqu(e) {
                            // // console.log(e)
                            // console.log(e.target.options.details.coordinate)
                            _this.lnglat = JSON.parse(e.target.options.details.coordinate);
                            _this.ruleForm = e.target.options.details;
                            _this.equipmentIds = e.target.options.details.principalName
                            _this.dialog = true;
                        });
                    }
                    if (this.tubiaoList[e].type == '虫情监控' && this.tubiaoList[e].coordinate) {
                        console.log('虫情', e);
                        var con = JSON.parse(this.tubiaoList[e].coordinate);
                        var icon = new T.Icon({
                            iconUrl: 'http://grove.cpzsyun.com:81/icon/虫情监控.png',
                            iconSize: new T.Point(25, 45),
                            iconAnchor: new T.Point(10, 25)
                        });
                        this.marker = new T.Marker(
                            new T.LngLat(
                                con[0].lng,
                                con[0].lat
                            ), { icon: icon, details: this.tubiaoList[e] });
                        this.map.addOverLay(this.marker);
                        let _this = this;
                        this.marker.addEventListener('click', function huoqu(e) {

                        });
                        this.marker.addEventListener('dblclick', function huoqu(e) {
                            // // console.log(e)
                            // console.log(e.target.options.details.coordinate)
                            _this.lnglat = JSON.parse(e.target.options.details.coordinate);
                            _this.ruleForm = e.target.options.details;
                            _this.equipmentIds = e.target.options.details.principalName
                            _this.dialog = true;
                        });
                    }
                    if (this.tubiaoList[e].type == '杀虫灯' && this.tubiaoList[e].coordinate) {
                        console.log('杀虫灯', e);
                        var con = JSON.parse(this.tubiaoList[e].coordinate);
                        var icon = new T.Icon({
                            iconUrl: 'http://grove.cpzsyun.com:81/icon/杀虫灯.png',
                            iconSize: new T.Point(25, 45),
                            iconAnchor: new T.Point(10, 25)
                        });
                        this.marker = new T.Marker(
                            new T.LngLat(
                                con[0].lng,
                                con[0].lat
                            ), { icon: icon, details: this.tubiaoList[e] });
                        this.map.addOverLay(this.marker);
                        let _this = this;
                        this.marker.addEventListener('click', function huoqu(e) {

                        });
                        this.marker.addEventListener('dblclick', function huoqu(e) {
                            // // console.log(e)
                            // console.log(e.target.options.details.coordinate)
                            _this.lnglat = JSON.parse(e.target.options.details.coordinate);
                            _this.ruleForm = e.target.options.details;
                            _this.equipmentIds = e.target.options.details.principalName
                            _this.dialog = true;
                        });
                    }
                    //气象传感
                    if (this.tubiaoList[e].type == '气象传感' && this.tubiaoList[e].coordinate) {
                        console.log('气象', e);
                        var con = JSON.parse(this.tubiaoList[e].coordinate);
                        var icon = new T.Icon({
                            iconUrl: 'http://grove.cpzsyun.com:81/icon/气象传感.png',
                            iconSize: new T.Point(25, 45),
                            iconAnchor: new T.Point(10, 25)
                        });
                        this.marker = new T.Marker(
                            new T.LngLat(
                                con[0].lng,
                                con[0].lat
                            ), { icon: icon, details: this.tubiaoList[e] });
                        this.map.addOverLay(this.marker);
                        let _this = this;
                        this.marker.addEventListener('click', function huoqu(e) {
                        });
                        this.marker.addEventListener('dblclick', function huoqu(e) {
                            _this.ruleForm = e.target.options.details;
                            _this.equipmentIds = e.target.options.details.principalName
                            _this.dialog = true;
                        });
                    }
                }
                if (this.type != undefined && this.type != null && this.type != '') {
                    if (this.type == 2) {
                        this.farmarea();
                    }
                    if (this.type == 3) {
                        this.warehouse();
                    }
                    if (this.type == 4) {
                        this.architecture();
                    }
                }
            });
        },
        handleAdd1() {
            var that = this;
            this.modal1 = true;
            this.formData1.type = '0';
            this.typeShow = true;
            this.map.clearOverLays();
            this.polygonTool.open();
            this.polygonTool.addEventListener('draw', function huoqu(e) {
                var list = e.currentLnglats;
                var s = JSON.stringify(list);
                localStorage.setItem('list', s);
                that.mas = JSON.parse(s);
            });
            this.getmas();
        },
        sousuo() {
            var _this = this;
            //搜索输入的位置。拿到坐标
            this.geocoder.getPoint(this.addressname, function searchResult(result) {
                if (result.getStatus() == 0) {
                    this.zhongxin = result.getLocationPoint();
                    this.marker = new T.Marker(result.getLocationPoint());
                    _this.lnt = result.getLocationPoint().lng;
                    _this.lat = result.getLocationPoint().lat;
                    _this.panto();
                } else {
                    alert(result.getMsg());
                }
            });
        },
        //移动到搜索的位置
        panto() {
            this.map.panTo(new T.LngLat(this.lnt, this.lat), 18);
        }
    }
};
</script>

<style scoped lang="less">
/deep/.tdt-marker-icon,
.tdt-marker-shadow {
    //border: 3px solid white;
    //border-radius: 50%;
}

.qjt {
    position: absolute;
    top: 100px;
    left: 200px;
    background: white;
}

.el-scrollbar__wrap {
    overflow-x: hidden;
}

.mapDiv {
    width: 100%;
    height: 85vh;
    z-index: 0;
}

.zoology {
    width: 120px;
    text-align: center;
    height: 80px;
    line-height: 30px;
    position: absolute;
    top: 20px;
    left: 40px;
    z-index: 100;
    background: white;
    border-radius: 6px;
}

.zoology1 {
    width: 360px;
    text-align: center;
    height: 80px;
    line-height: 30px;
    position: absolute;
    top: 20px;
    left: 170px;
    z-index: 100;
    background: white;
    border-radius: 6px;
}

.zoology2 {
    width: 360px;
    text-align: center;
    height: 80px;
    line-height: 30px;
    position: absolute;
    top: 20px;
    left: 540px;
    z-index: 100;
    background: white;
    border-radius: 6px;
}

.stbh {
    position: relative;
}

.margin-left {
    margin-left: 20px;
}

.address {
    width: 200px;
    text-align: center;
    height: 80px;
    position: absolute;
    top: 20px;
    left: 910px;
    z-index: 100;
    background: white;
    border-radius: 6px;
}

.addressinput {
    width: 150px;
    height: 57px;
}

.addressspan {
    font-size: 14px;
}

.lu {
    width: 8px;
    height: 16px;
    background: greenyellow;
    margin-left: 10px;
}

.hnk {
    display: inline-block;
}

.jgxx {
    margin-left: 10px;
    font-weight: 600;
    font-size: 15px;
}

/* .el-drawer.rtl{
    overflow: scroll;
} */
// .demo-drawer__content{
// 	display: flex;
// 	flex-direction: column;
// 	padding:20px;
// 	height:100%;
// 	.el-form{
// 		flex:1;
// 		height:0;
// 		overflow: auto;
// 	}
// 	.drawer-footer{
// 		display:flex;
// 		.el-button{
// 			flex:1;
// 		}
// 	}
// }
.el-drawer__body {
    // height:0;
    overflow: auto;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 180px;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.el-upload--text {
    width: 180px;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
